<script setup>
import { getAchievementType } from '@/api/secretary/seretary.js'
import { getTeahProjList } from '@/api/teacher/teacher.js'
import { NButton } from 'naive-ui'

/* 获取成果类别列表 */
const typeOptions = ref()
const getType = async() => {
  const { data: res } = await getAchievementType()
  if(res.code === 1) {
    typeOptions.value = res.data.map(item => ({label: item.type,value: item.id}))
  }
  else if(res.code === 0) alert(res.msg)
}
//调用获取成果类别列表方法
getType()

/* 分页 */
const currentPage = ref(1)
const page_size = ref(5)
const itemCount = ref(null)
const onUpdatePage = async() => { 
  const statusId = 4
  const pageSize = page_size.value
  const page = currentPage.value
  const { data:res } = await getTeahProjList({statusId,pageSize,page})
  if (res.code  === 1) {
    data.value = res.data.rows
  }
  else if(res.code === 0) {
    alert(res.message)
  }
}

/* 默认获取完成审核的教学项目列表 */
const data = ref([])
const getData = async() => {
  const statusId = 4
  const pageSize = page_size.value
  const { data:res } = await getTeahProjList({statusId,pageSize})
  if (res.code  === 1) {
    data.value = res.data.rows
    itemCount.value = res.data.total
  }
  else if(res.code === 0) {
    alert(res.message)
  }
}
//调用获取需要审核的教师教学项目列表
getData()

/* 条件查询成果信息 */
const year = ref(null)
const formValue = ref({
  statusId: 4,
  achievementType: 1,
  name: null,
  jobNumber: null,
  year: null,
  projectName: null,
})
const searchAchievement = async() => {
  if(year.value != null) {
    const date = new Date(year.value)
    const switchYear = date.getFullYear()
    formValue.value.year = switchYear
  }
  if(formValue.value.achievementType === 1) {
    const { data: res } = await getTeahProjList(formValue.value)
    if(res.code === 1) {
      data.value = res.data.rows
      itemCount.value = res.data.total
    }
    else if(res.code === 0) {
      alert(res.message)
    }
  }
  formValue.value.year = null
}

/* 表格信息 */
const columns = [
  { title: '序号', key: 'key', render: (_,index) =>`${index + 1}`, align: "center" },
  { title: '申请人',key: 'name', align: 'center' },
  { title: '工号',key: 'jobNumber', align: 'center' },
  { title: '项目名称', key: 'projectName', align: "center" },
  { title: '项目级别', key: 'level', align: "center" },
  { title: '获批年度', key: 'year', align: "center" },
  { title: '项目负责人', key: 'leader', align: "center" },
  { title: '其他成员', key: 'others', align: "center" },
  { title: '相关附件', key: 'attachment', align: "center", render: row => {
    return h(NButton,{
              size: 'small', type: 'info', quaternary: true, onclick: () => {
                const url = 'http://localhost:8080' + row.attachment
                window.open(url,"_blank")
              }},
              { default: () => '查看' }
            )
  } },
  { title: '备注', key: 'comment', align: "center" },
  { title: '操作', key: 'operate', align: "center", render: row => {
    return h(NButton,{
        size: 'small', type: 'primary', secondary: true, onclick: () => {
          showMoreModal.value = true
          viewForm.value.name = row.name
          viewForm.value.jobNumber = row.jobNumber
          viewForm.value.projectName = row.projectName
          viewForm.value.level = row.level
          viewForm.value.year = row.year
          viewForm.value.leader = row.leader
          viewForm.value.others = row.others
          viewForm.value.attachment = row.attachment
          viewForm.value.comment = row.comment
        }
      },
      { default: () => '详情'}
      )
  } }    
]

/* 上传文件模态框 */
const showUoloadModal = ref(false)
const fileListLength = ref(0)
const handleChange = (options) => {
  fileListLength.value = options.fileList.length
}


/* 详情模态框 */
const showMoreModal = ref(false)
const viewForm = ref({
  name: null,
  jobNumber: null,
  projectName: null,
  level: null,
  year: null,
  leader: null,
  others: null,
  attachment: null,
  comment: null,
})

</script>

<template>
  <div>
    <div class="title">成果信息查询</div>
    <n-space style="margin-bottom: 5px;">
      <n-form
        inline
        label-placement="left"
        :model="formValue"
        size="small"
      >
        <n-form-item label="成果类别" path="achievementType">
          <n-select v-model:value="formValue.achievementType" placeholder="请选择" :options="typeOptions" style="width: 130px;" />
        </n-form-item>
        <n-form-item label="年份" path="year">
          <n-date-picker v-model:value="year" type="year" style="width:100px"/>
        </n-form-item>
        <n-form-item label="姓名" path="name">
          <n-input v-model:value="formValue.name" placeholder="输入姓名" style="width: 100px;" />
        </n-form-item>
        <n-form-item label="工号" path="jobNumber">
          <n-input v-model:value="formValue.jobNumber" placeholder="输入工号" />
        </n-form-item>
        <n-form-item label="项目名称" path="projectName">
          <n-input v-model:value="formValue.projectName" placeholder="输入项目名称" />
        </n-form-item>
        <n-form-item>
          <n-button attr-type="button" @click="searchAchievement" type="info">
            查询
          </n-button>
        </n-form-item>
      </n-form>
    </n-space>
    <div class="inOut">
        <n-button size="small" @click="showUoloadModal = true">导入
          <template #icon>
            <n-icon>
              <img src="@/assets/Excel.png" style="height: 20px;">
            </n-icon>
          </template>
        </n-button>
      <n-upload style="width: 72px; height: 20px">
        <n-button size="small">导出
          <template #icon>
            <n-icon>
              <img src="@/assets/Excel.png" style="height: 20px;">
            </n-icon>
          </template>
        </n-button>
      </n-upload>
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      bordered
      :single-line="false"
    />
    <div class="pagination">
      <n-pagination v-model:page="currentPage"
                  @update-page="onUpdatePage"
                  :page-size="page_size"
                  :item-count="itemCount"/>
    </div>

    <!--上传文件模态框-->
    <n-modal v-model:show="showUoloadModal">
      <n-card
        style="width: 300px"
        title="导入"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        closable @close="showUoloadModal = false"
      >
      <n-button
        :disabled="!fileListLength"
        style="margin-bottom: 12px"
        @click="handleClick"
      >
        上传文件
      </n-button>
      <n-upload
        ref="upload"
        action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
        :default-upload="false"
        multiple
        @change="handleChange"
      >
        <n-button>选择文件</n-button>
      </n-upload>
        <template #footer>
          <span class="footer">请严格按照excel模板导入excel</span>
        </template>
      </n-card>
    </n-modal>

    <!-- 详情模态框 -->
    <n-modal v-model:show="showMoreModal">
        <n-card style="width: 480px;"
              title="教学项目详情"
              bordered
              closable
              @close="showMoreModal=false"
              size="small"
              role="dialog"
              aria-modal="true">
          <n-form style="padding-top: 10px;"
                label-placement="left"
                label-width="100"
                label-align="right">
          <n-form-item label="申请人:" path="name">
            <span>{{ viewForm.name }}</span>
          </n-form-item>
          <n-form-item label="工号:" path="jobNumber">
            <span>{{ viewForm.jobNumber }}</span>
          </n-form-item>
          <n-form-item label="项目名称:" path="projectName">
            <span>{{ viewForm.projectName }}</span>
          </n-form-item>
          <n-form-item label="项目级别:" path="level">
            <span>{{ viewForm.level }}</span>
          </n-form-item>
          <n-form-item label="获批年度:" path="year">
            <span>{{ viewForm.year }}</span>
          </n-form-item>
          <n-form-item label="项目负责人:" path="leader">
            <span>{{ viewForm.leader }}</span>
          </n-form-item>
          <n-form-item label="其他成员:" path="others">
            <span>{{ viewForm.others }}</span>
          </n-form-item>
          <n-form-item label="相关附件:" path="attachment">
                <a :href = "'http://localhost:8080'+ viewForm.attachment" target="_blank" style="color: #2080f0;">查看</a>
          </n-form-item>
          <n-form-item label="备注:" path="comment">
            <span>{{ viewForm.comment }}</span>
          </n-form-item>
        </n-form>
        </n-card>
    </n-modal>
  </div>
</template>

<style scoped>
.title{
  color: rgb(5,93,163);
  text-align: center;
  font-size:22px;
  font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
  border-bottom: 1px solid rgb(193, 217, 237);
  margin-bottom: 5px;
}
.inOut{
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
::v-deep .n-form-item-feedback-wrapper{
  min-height: 2px;
}
.pagination {
  float: right;
  padding-top: 50px;
}
span {
  width: 364px;
  padding: 5px;
  border: 1px solid rgb(184, 182, 182);
  min-height: 15px;
  margin-bottom: 15px;
}
.footer{
  border: 0;
  color: red;
  font-size: 14px;
}
</style>